<template>
    <div class="w-full h-full bg-#F8F8F8 py-5%">
        <ClientOnly>
            <div class="flex items-start justify-center h-screen overflow-hidden min-h-740px">
                <div class="w-200px bg-white   mr-12px rounded-md shadow-lg p-20px ">
                    <div class="text-center p-10px text-#AC8358 rounded-md shadow-amber bg-#e1c3a3">
                        <i class="i-ri:account-pin-circle-line h-20px w-20px " />
                        个人中心
                    </div>
                    <button class="w-full my-5px h-40px  rounded-md active:bg-#dfd6c7"
                        :class="{ 'bg-#e1c3a3': btnType == 1 }" @click="btnType = 1">收藏夹</button>
                    <button class="w-full my-5px h-40px rounded-md active:bg-#dfd6c7"
                        :class="{ 'bg-#e1c3a3': btnType == 2 }" @click="btnType = 2">基本信息</button>
                    <button class="w-full my-5px h-40px rounded-md active:bg-#dfd6c7"
                        :class="{ 'bg-#e1c3a3': btnType == 3 }" @click="btnType = 3">账号设置</button>
                    <button class="w-full my-5px h-40px rounded-md active:bg-#dfd6c7"
                        :class="{ 'bg-#e1c3a3': btnType == 4 }" @click="btnType = 4">个人投稿</button>
                </div>
                <div class="w-1000px h-100% bg-white bg-cover rounded-md shadow-lg ">
                    <div v-if="btnType == 1" class="relative h-full">

                        <div class="bg-[url('/img/login-bg.png')] py-4 px-8 bg-cover" flex="~ items-center">
                            <div class="mx-auto">
                                <span class="text-1.2rem  text-#AC8358  "><b>个人收藏夹</b></span><br />
                            </div>
                        </div>
                        <div class="grid cols-2 gap-1 p-8 h-100% grid-rows-[repeat(auto-fit,minmax(200px,200px))]">
                            <div v-for="item in collectionList" class="bg-white rounded-md shadow-lg p-5 flex ">
                                <el-image style="width: 30%; height: 150px" :src="getImgUrl(item.cover_file_name)"
                                    class=" rounded-1" fit="cover" />
                                <div class="m-l-4 w-5/7">
                                    <p class="text-16px text-#AC8358 h-47px overflow-hidden text-ellipsis hover:w-7/6 hover:z-10 hover:relative "><b>{{ item.title_name?? "暂无标题" }}</b></p>
                                    <p>编纂单位：{{ item.create_user ?? "暂无信息" }}</p>
                                    <p>出版发行：{{ item.publish_company ?? "暂无信息" }}</p>
                                    <p>发布时间：{{ item.create_time ?? "暂无信息" }}</p>
                                    <button class="btn w-1/3 mr-1/3 whitespace-nowrap">在线阅读</button>
                                    <button class="btn w-1/3 whitespace-nowrap"
                                        :class="{ 'text-red-400': item.is_collected ? false : true }"
                                        @click="item.is_collected = !item.is_collected"><i
                                            class="i-ri:heart-3-fill text-14px "></i>已收藏</button>
                                </div>
                            </div>
                        </div>
                        <div class="text-right m-t-10 float-end absolute right-2 bottom-2">
                            <el-button color="#AC8358" :icon="ArrowLeft" plain @click="upper()"></el-button>
                            <el-button color="#AC8358" :icon="ArrowRight" style="color:#fff"
                                @click="next()"></el-button>
                        </div>
                    </div>
                    <div v-if="btnType == 2">

                        <div class="bg-[url('/img/login-bg.png')] py-4 px-8 bg-cover" flex="~ items-center">
                            <el-avatar :size="85" class="cursor-pointer" :src="getImgUrl(userInfo?.header_url)">
                                <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                            </el-avatar>
                            <div class="ml-20px">
                                <span class="text-1.2rem  text-#AC8358  "><b>{{ userInfo?.real_name }}</b></span><br />
                                <span>{{ 'No.' + userInfo?.user_no }}</span>
                            </div>
                        </div>
                        <div class="grid grid-cols-[120px_1fr] items-center gap-y-[20px] gap-x-[1px] py-5 px-18">
                            <span class="text-left">用户名<b class="text-red-500 p-l-10px">*</b></span>
                            <input placeholder="请输入账号" disabled="false"
                                class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                                :input="userInfo.mobile" />
                            <span class="text-left">用户昵称</span>
                            <input placeholder="请输入用户名"
                                class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                                v-model="userInfo.real_name" />
                            <span class="text-left">性别</span>
                            <el-radio-group v-model="userInfo.sex">
                                <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
                                <el-radio value="男">男</el-radio>
                                <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
                                <el-radio value="女">女</el-radio>
                            </el-radio-group>
                            <span class="text-left">手机号<b class="text-red-500 p-l-10px">*</b></span>
                            <input placeholder="请输入手机号"
                                class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px  "
                                v-model="userInfo.mobile" />
                            <span class="text-left">邮箱</span>
                            <input placeholder="请输入邮箱"
                                class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px   "
                                v-model="userInfo.email" />
                            <span class="text-left">机构信息</span>
                            <input placeholder="暂无信息" disabled="false"
                                class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px   "
                                v-model="userInfo.email" />
                            <span class="text-left">职位</span>
                            <input placeholder="请输入职位" disabled="false"
                                class="h-35px inline p-15px outline-none rounded-md border-#ac845875 border-2px   "
                                v-model="userInfo.user_type" />
                        </div>
                        <div class="mx-40% my-6">
                            <button class="btn w-200px"> 保存 </button>
                        </div>
                    </div>
                    <div v-if="btnType == 3">

                        <div class="bg-[url('/img/login-bg.png')] py-4 px-8 bg-cover" flex="~ items-center">
                            <div class="mx-auto">
                                <span class="text-1.2rem  text-#AC8358  "><b>账号设置</b></span><br />
                            </div>
                        </div>

                        <div class="mx-40% my-6">
                            <button class="btn w-200px" @click="useUserStore().logout()"> 退出登录 </button>
                        </div>
                    </div>

                    <div v-if="btnType == 4">

                        <div class="bg-[url('/img/login-bg.png')] py-4 px-8 bg-cover" flex="~ items-center">
                            <div class="mx-auto">
                                <span class="text-1.2rem  text-#AC8358  "><b>稿件记录</b></span><br />
                            </div>
                        </div>
                        <div>
                            <div v-for="(item, index) in manuscriptList" class="m-2 p-4 h-70px bg-#F8F8F8 rounded-md shadow-lg"
                                flex="~ justify-around">
                                <div class="w-1/2">{{ item.title ?? "暂无标题" }}</div>
                                <div class="text-center"><b>投稿时间</b><br /><span class="text-12px text-gray">{{
                            item.create_time }}</span></div>
                            </div>

                        </div>

                    </div>

                </div>
            </div>
        </ClientOnly>
    </div>

</template>

<script lang="ts" setup>
import { getManuscriptList, getCollectionList } from '~/api/home'
import {
    ArrowLeft,
    ArrowRight,
} from '@element-plus/icons-vue'
const btnType = ref<1 | 2 | 3 | 4>(1)
const router = useRouter()
const store = useUserStore()
const userInfo = ref({ ...store.userInfo, sex: store.userInfo.sex ?? "男" })
var manuscriptList = ref([])
const collectionList = ref<any[]>([])
const queryParams = reactive(
    {
        page: {
            rownumber: 6,
            pageNo: 1,
        },
    },
)
getManuscriptList({
    'condition': [{ colName: "phone", ruleType: "like", value: userInfo.value.mobile }]
}).then(res => {
    if (res.state == "SUCCESS") {
        manuscriptList.value = res.data
    }
})
function upper() {
    if (queryParams.page.pageNo != 1) {
        queryParams.page.pageNo--
    }
    getData()
}
function next() {
    queryParams.page.pageNo++
    getData()
}
function getData() {
    getCollectionList(queryParams).then((res) => {
        if (res.state == "SUCCESS") {
            collectionList.value = res.data
            console.log(res.data);

        }
    }).catch(() => {
    })
}
getData()
</script>

<style lang="scss" scoped>
.btn-on {
    border-bottom: 4px solid #ac8458;
}

.jizhu {
    &:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
        color: #55637dd9
    }
}
</style>